<!--
 * @Author: C.
 * @Date: 2021-06-10 08:56:42
 * @LastEditTime: 2021-06-17 17:28:45
 * @Description: file content
-->
<template>
  <div class="jv-header"
       :style="{height:isExtend?'auto':'42px',width:width}">
    <el-form :inline="true"
             ref="form"
             size="mini">
      <!-- 插槽 -->
      <slot name="pre-slot"></slot>
      <!-- 日期选择器 -->
      <el-form-item>
        <el-date-picker v-model="pikerTime"
                        style="width:250px"
                        type="daterange"
                        :editable="false"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        @change="timeChange">
        </el-date-picker>
      </el-form-item>
      <!-- 查询 -->
      <el-form-item>
        <el-button type="primary"
                   size="mini"
                   icon="el-icon-search"
                   @click="query">
          查询
        </el-button>
      </el-form-item>
      <!-- 重置 -->
      <el-form-item>
        <el-button @click="reset"
                   size="mini"
                   icon="el-icon-refresh">
          重置
        </el-button>
      </el-form-item>
      <!-- 按钮插槽 -->
      <slot name="btn-slot"></slot>
      <!-- 更多 -->
      <el-form-item v-if="$slots.default">
        <el-button @click="isExtend=!isExtend"
                   size="mini">
          <i class="el-icon-arrow-down"
             :class="{'is-reverse': isExtend}">
          </i>
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 延展框 -->
    <el-form :inline="true"
             size="mini">
      <slot></slot>

    </el-form>

  </div>
</template>

<script>
export default {
  data () {
    return {
      pikerTime: '',
      isExtend: false
    }
  },
  props: {
    width: {
      type: String,
      default: '55%'
    }
  },
  created () {
    // console.log(this.$slots, '139.224.231.98:8111');
    this.keyupSubmit()
  },
  methods: {
    // 时间选择
    timeChange (e) {
      this.$emit('timeChange', e)
    },
    // 查询
    query () {
      this.$emit('query')
    },
    // 重置
    reset () {
      this.pikerTime = ''
      this.$emit('reset')
    },
    // 键盘事件监听
    keyupSubmit () {
      document.onkeydown = e => {
        let _key = window.event.keyCode
        if (_key === 13) {
          this.query()
        }
      }
    }
  }
}
</script>

<style lang="scss">
.jv-header {
  overflow: hidden;
  .is-reverse {
    transition: 0.3s;
    transform: rotate(180deg);
  }
  .el-form .el-form-item__content .el-input input {
    width: 120px;
  }
}
</style>
